Skip to content

Auto-scroll tooltip targets into view before positioning#128

Merged
karngyan merged 2 commits intodevelopfrom
inapp-14294
Mar 24, 2026
Merged

Auto-scroll tooltip targets into view before positioning#128
karngyan merged 2 commits intodevelopfrom
inapp-14294

Conversation

@karngyan
Copy link
Copy Markdown
Member

@karngyan karngyan commented Mar 24, 2026

Summary

  • Add auto-scroll-into-view behavior for tooltip targets that exist in the DOM but are outside the visible viewport (or clipped by a scroll container). Before showing a tooltip, the SDK now checks whether the target is visible and, if not, performs a preflight check (canTooltipFitInViewport) to predict whether the tooltip can be successfully placed after scrolling. Only when the preflight passes does it smooth-scroll the target into view and wait for the scroll to settle before positioning.
  • showTooltipComponent is now async to accommodate the scroll-and-wait cycle; all call sites and tests have been updated accordingly.
  • Example page updated with two new demo buttons (offscreen page target and scroll container target) to exercise the feature.

Key Changes

tooltip-position-manager.ts

  • canTooltipFitInViewport — simulates a centered viewport position for the target and checks whether findBestPosition would succeed, without actually scrolling.
  • waitForScrollSettle — polls getBoundingClientRect().top until the target's position stabilizes or a timeout (1 s) elapses.
  • ensureTargetInView — orchestrates visibility check → preflight → scrollIntoView({ behavior: 'smooth' }) → settle wait → post-scroll visibility confirmation.

message-component-manager.ts

  • showTooltipComponent is now async; calls ensureTargetInView before positionTooltip and bails out early if the target cannot be brought into view.

message-manager.ts

  • awaits the now-async showTooltipComponent.

Tests

  • Full coverage for canTooltipFitInViewport and ensureTargetInView (already visible, offscreen with successful scroll, nested scroll container, preflight failure).
  • All existing showTooltipComponent tests updated from sync to async.

Test Plan

  • Run npm test — all existing and new tests pass
  • Manual: open example page, click "Offscreen Page Target" — page smooth-scrolls to the below-the-fold button and tooltip appears
  • Manual: click "Scroll Container Target" — item inside scroll container scrolls into view and tooltip appears
  • Verify no scroll happens when tooltip would not fit (e.g., very large tooltip in a small viewport)
  • Confirm no behavior change for targets already in the viewport

Note

Medium Risk
Adds new auto-scroll and preflight placement logic to tooltip rendering and makes showTooltipComponent async, which can change timing/behavior and introduce scroll side effects across tooltip call paths.

Overview
Tooltips now auto-scroll their target into view before positioning: if the target is off-screen/clipped, the SDK runs a preflight (canTooltipFitInViewport) and only then performs a smooth scrollIntoView and waits for scroll to settle (ensureTargetInView).

showTooltipComponent is updated to async and will bail out early (without calling positionTooltip) when the target can’t be made visible; message-manager and related tests/mocks are updated to await this behavior. The example page adds new demo controls/targets to exercise offscreen and scroll-container scenarios.

Written by Cursor Bugbot for commit 72594d0. This will update automatically on new commits. Configure here.

@karngyan karngyan requested a review from a team as a code owner March 24, 2026 11:32
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

@karngyan karngyan merged commit 2e762b9 into develop Mar 24, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants